<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>位置移动作业</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        #left{
          float: left;
           margin-left: 50px;
            margin-right: 500px;
            margin-top: 50px;
        }
        #right{
            float: left;
            margin-top: 50px;
        }
        .colour{
            color: red;
            font-weight: bolder;
            margin-bottom: 10px;
        }
        label{
            margin-bottom: 10px;
        }

        #box{
            width: 300px;
            height: 350px;
            padding: 100px;
            border: 1px solid red;
        }
        #move1{
            width: 200px;
            height: 100px;
            background: blue;
            border: 1px solid black;
        }
        .box1{
        transform: translateX(10px);
        -webkit-transform: translateX(10px);
        -moz-transform: translateX(10px);
        -o-transform: translateX(10px);
        -ms-transform: translateX(10px);
        }
        .box2{
            transform: translateY(20px);
            -webkit-transform: translateY(20px);
            -moz-transform: translateY(20px);
            -o-transform: translateY(20px);
            -ms-transform: translateY(20px);
        }
        .box3{
            transform: translate(20px,10px);
            -webkit-transform: translate(20px,10px);
            -moz-transform: translate(20px,10px);
            -o-transform: translate(20px,10px);
            -ms-transform: translate(20px,10px);
        }
        .box4{
            transform: translate(20px,20px);
            -webkit-transform: translate(20px,20px);
            -moz-transform: translate(20px,20px);
            -o-transform: translate(20px,20px);
            -ms-transform: translate(20px,2px);
        }
        .box5{
            transform: translate(50px,50px);
            -webkit-transform: translate(50px,50px);
            -moz-transform: translate(50px,50px);
            -o-transform: translate(50px,50px);
            -ms-transform: translate(50px,50px);
        }
        .box6{
            transform: translate(100px,100px);
            -webkit-transform: translate(100px,100px);
            -moz-transform: translate(100px,100px);
            -o-transform: translate(100px,100px);
            -ms-transform: translate(100px,100px);
        }
        .box7{
            transform: translate(-25px,-25px);
            -webkit-transform: translate(-25px,-25px);
            -moz-transform: translate(-25px,-25px);
            -o-transform: translate(-25px,-25px);
            -ms-transform: translate(-25px,-25px);
        }
        .box8{
            transform: translate(0,0);
            -webkit-transform: translate(0,0);
            -moz-transform: translate(0,0);
            -o-transform: translate(0,0);
            -ms-transform: translate(0,0);
        }
</style>
</head>
<body>
    <div id="left">
        <p class="colour">CSS属性:</p>
        <p>transform:</p>
        <br/>
        <input type="radio" onclick="fn1()" id="one" name="translate" value="translate(10px)">
        <label for="one">translateX(10px)</label>
        <br/>
        <br/>
        <input type="radio" onclick="fn2()" id="two" name="translate" value="translate(20px)">
        <label for="two">translateY(20px)</label>
        <br/>
        <br/>
        <input type="radio" onclick="fn3()" id="three" name="translate" value="translate(20px,10px)">
        <label for="three">translate(20px,10px)</label>
        <br/>
        <br/>
        <input type="radio" onclick="fn4()" id="four" name="translate" value="translate(20px,20px)">
        <label for="four">translate(20px,20px)</label>
        <br/>
        <br/>
        <input type="radio" onclick="fn5()" id="fif" name="translate" value="translate(50px,50px)">
        <label for="fif">translate(50px,50px)</label>
        <br/>
        <br/>
        <input type="radio" onclick="fn6()" id="six" name="translate" value="translate(100px,100px)">
        <label for="six">translate(100px,100px)</label>
        <br/>
        <br/>
        <input type="radio" onclick="fn7()" id="even" name="translate" value="translate(-25px,-25px)">
        <label for="even">translate(-25px,-25px)</label>
        <br/>
        <br/>
        <input type="radio" onclick="fn8()" id="eig" name="translate" value="none">
        <label for="eig">none</label>
    </div>
    <div id="right">
        <p class="colour">结果:</p>
       <div id="box">
           <p id="move1"></p>
       </div>
    </div>



    <script type="text/javascript">
        function fn1(){
            var img=document.getElementById("move1");
            img.className="box1";
        }
        function fn2(){
            var img=document.getElementById("move1");
            img.className="box2";
        }
        function fn3(){
            var img=document.getElementById("move1");
            img.className="box3";
        }
        function fn4(){
            var img=document.getElementById("move1");
            img.className="box4";
        }
        function fn5(){
            var img=document.getElementById("move1");
            img.className="box5";
        }
        function fn6(){
            var img=document.getElementById("move1");
            img.className="box6";
        }
        function fn7(){
            var img=document.getElementById("move1");
            img.className="box7";
        }
        function fn8(){
            var img=document.getElementById("move1");
            img.className="box8";
        }

    </script >
</body>
</html>